<template>
    <div class="f-button-component">
        <button
            @click="handleButtonClick"
            class="f-button"
            :class="buttonClass"
            :disabled="disabled">
            <slot>{{ text }}</slot>
        </button>
        <slot name="sbIphoneX"></slot>
    </div>
</template>

<script>
    /**
     * Created by c.y on 2018/3/16.
     * 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
     * 组件的各个属性详情下面props说明
     */
    export default {
        name: 'f-button',
        data () {
          return {}
        },
        computed: {
            // button的class
            buttonClass () {
                return [
                    {
                        'f-btn-disabled': this.disabled,
                        'f-btn-min': this.size === 'mini',
                        'f-btn-no-border': !this.isBorderRadius
                    },
                ]
            },
        },
        methods: {
            // 处理非城市那妞的button的事件
            handleButtonClick () {
                if (this.disabled) {
                    return false;
                }
                this.$emit('on-click-button');
            }
        },
        props: {
            // type的按钮类型，默认按钮
            type: {
                type: String,
                default: 'default'
            },
            // 是否禁用
            disabled: {
                type: Boolean,
                default: false
            },
            // button的大小，mini, normal
            size: {
                type: String,
                default: 'normal'
            },
            // 按钮的文字
            text: {
                type: String
            },
            // 是否有圆角
            isBorderRadius: {
                type: Boolean,
                default: true
            }
        }
    }
</script>

<style lang="less">
    @import '../../style/mixin';
    @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
        //如果以后出现375*812,非ios机型，可以加上下面语句
        .sbIphoneX{
            height: 34px !important;
            background-color: @color-white;
        }
    }
    .f-button-component{

    }
    .f-button {
        display: block;
        width: 93.6%;
        height: 44px;
        margin: 32px auto 20px;
        line-height: @font-line-height-base;
        font-size: @font-size-primary;
        color: #fff;
        text-align: center;
        border: none;
        border-radius: @border-radius-normal-size;
        .color-linear-gradient(@color-gradient-darkBlue-left, @color-gradient-darkBlue-right);
        outline: 0;
        -webkit-appearance: none;
    }
    .f-btn-disabled {
        background: @color-disabled;
    }
    .f-btn-min {
        display: inline-block;
        width: 64px;
        height: 32px;
        margin: 0;
    }
    .f-button:not(.f-btn-disabled):active {
       background: @color-primary;
    }
    .f-btn-no-border{
        width:100%;
        border-radius: 0;
    }
</style>
